<template>
    <div id="app">
        <div class="first">
            <p class="more"  @mousemove="moreData" @mouseout="hiddenData" id="more">更多</p>
            <div class="sjx" @mousemove="moreData" @mouseout="hiddenData"></div>
            <div id="data" hidden = true @mousemove="moreData" @mouseout="hiddenData">
                <nav>
                    <RouterLink to="/about">
                        <ul>
                            <li>全部</li>
                            <li>剧情</li>
                            <li>娱乐</li>
                            <li>科技</li>
                            <li>游戏</li>
                            <li>体育</li>
                            <li>动漫</li>
                            <li>少儿</li>
                            <li>综艺</li>
                            <li>美食</li>
                        </ul>
                    </RouterLink>
                </nav>
            </div>
        </div>
        <div class="video-content">
            <video
                ref="myVideo"
                poster=""
                src="https://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4"
                controls=true
                oncontextmenu="return false"
                @timeupdate="timeupdate"
                controlslist="nodownload"
                class="video-box"
                autoplay
            ></video>
        </div>
        <div class="list">
            <h2>励志</h2>
            <ul>
                <li>
                    <img src="https://1vimg.hitv.com/100/2404/0810/4149/91kKUAb/278837788923678720.jpg">
                    <p>爸爸当家3</p>
                    <span>应采儿被儿子发现教学？</span>
                </li>
                <li>
                    <img src="https://0vimg.hitv.com/100/2404/1319/0744/2Af8mC6wA5/280777047588200448.jpg?x-oss-process=image/resize,w_500,h_280/format,webp">
                    <p>我们仨</p>
                    <span>郭麒麟E人社交开启热聊模式</span>
                </li>
                <li>
                    <img src="https://1vimg.hitv.com/100/2404/0411/5415/2Af8mC6wA5/277406466964709376.jpg">
                    <p>我想和你唱5</p>
                    <span>魏如萱温柔嗓音蕴含坚定力量</span>
                </li>
            </ul>
        </div>
        <div class="list2">
            <h2>温暖</h2>
            <ul>
                <li>
                    <img src="https://1vimg.hitv.com/100/2404/0810/4149/91kKUAb/278837788923678720.jpg">
                    <p>爸爸当家3</p>
                    <span>应采儿被儿子发现教学？</span>
                </li>
                <li>
                    <img src="https://0vimg.hitv.com/100/2404/1319/0744/2Af8mC6wA5/280777047588200448.jpg?x-oss-process=image/resize,w_500,h_280/format,webp">
                    <p>我们仨</p>
                    <span>郭麒麟E人社交开启热聊模式</span>
                </li>
                <li>
                    <img src="https://1vimg.hitv.com/100/2404/0411/5415/2Af8mC6wA5/277406466964709376.jpg">
                    <p>我想和你唱5</p>
                    <span>魏如萱温柔嗓音蕴含坚定力量</span>
                </li>
            </ul>
        </div>
  </div>
</template>

<script setup>
    function moreData(){
        document.getElementById('data').hidden = false
        document.getElementById('more').style.color = "rgb(255, 89, 0)"
    }
    function hiddenData(){
        document.getElementById('data').hidden = true
        document.getElementById('more').style.color = "black"
    }
</script>

<style scoped lang="scss">
.sjx{
    position: fixed;
    left: 365px;
    top: 30px;
    width: 40px;
    height: 40px;
}
#data{
    position: fixed;
    left: 230px;
    top: 60px;
    border-radius: 20px;
    width: 300px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.628);
}
#data li{
    font-size: 18px;
    list-style: none;
    float: left;
    margin-right: 26px;
    margin-bottom:40px ;
}
.more{
    position: fixed;
    top: 17px;
    left: 370px;
    font-size: 14px;
    color: black;
    font-weight: 700;
}
.video-content{
    margin-top: 80px;
}
#app{
    width: 80%;
    height: 100vh;
    margin-left: 10%;
}
video{
    width:100%;
}
.list{
    width: 100%;
    height: 180px;
    margin-top: 20px;
}
.list2{
    width: 100%;
    height: 180px;
    margin-top: 80px;
}
.list ul,.list2 ul{
    width: 100%;
    height: 100%;
}
.list li,.list2 li{
    width: 30%;
    height: 100%;
    margin-right: 20px;
    list-style: none;
    display: inline-block;
    position: relative;
}
.list img,.list2 img{
    width: 100%;
}
.list p,.list2 p{
    position: absolute;
    bottom: 30px;
    left: 10px;
    color:white;
}
.list span,.list2 span{
    position: absolute;
    bottom: 20px;
    left: 10px;
    color: white;
}
</style>